<template>
	<div class="view">
		<div class="mark" v-if="showBox" @click="showBox = false">
			<div class="selectBox">
				<p @click.stop="to('/pages/CommunityPages/issue/main?type=0&groupId=' + List.id)">发帖</p>
				<p @click.stop="to('/pages/CommunityPages/issue/main?type=1&groupId=' + List.id)">求助</p>
			</div>
		</div>

		<div class="head">
			<p v-if="List.status == 1" class="send" @click="showBox = true">发布</p>
			<p v-else class="send"></p>
			<div class="info">
				<div class="left">
					<image :src="List.iconUrl" mode="aspectFill" />
					<div>
						<p>{{ List.groupName || '' }}</p>
						<p>{{ List.groupNumber || 0 }}人已加入</p>
					</div>
				</div>
				<div @click="join(List.id)" :class="List.status == 0 ? 'right' : 'right gray'">
					{{ List.status == 1 ? '已加入' : '加入' }}
				</div>
			</div>
		</div>

		<v-tabs class="tabs" :class="{ isFiex: topFiex }" :tabs="titleList" :scroll="false" activeColor="black"
			lineColor="#32C59A" lineHeight="6rpx" :lineScale="0.2" v-model="active" @change="changeTab"></v-tabs>
		<div class="Box">
			<swiper @change="swiperChange" :current="active">
				<swiper-item v-for="(item, index) in titleItem" :key="index">
					<scroll-view scroll-y style="height: 100%;" @scrolltolower="loadMore">
						<communityList :groupId="id" :status="item.status" ref="communityList" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</div>
	</div>
</template>

<script>
	import {
		getGroupDetails,
		userJoinGroup,
		userQuitGroup
	} from '@/apis/request.js';
	import communityList from '@/components/communityList.vue';

	export default {
		components: {
			communityList
		},
		data() {
			return {
				key: 0,
				active: 0,
				top: null,
				topFiex: false,
				showBox: false,
				id: '',
				status: '',
				List: {},
				titleList: ['全部', '悬赏', '互助', '等待'],
				titleItem: [{
						groupId: 0,
						status: 0
					},
					{
						groupId: 0,
						status: 5
					},
					{
						groupId: 2,
						status: 2
					},
					{
						groupId: 3,
						status: 3
					}
				]
			};
		},
		methods: {
			to(url) {
				uni.navigateTo({
					url
				});
			},
			loadMore() {
				this.$refs['communityList'][this.active].getList();
			},
			// 获取帖子信息
			async getdetals() {
				this.List = await getGroupDetails({
					groupId: this.id,
					userId: uni.getStorageSync('userInfo').id
				});
				uni.stopPullDownRefresh();
			},
			changeTab(e) {
				this.active = e;
			},
			swiperChange(e) {
				this.active = e.detail.current;
				if (this.$refs.communityList[this.active]) {
					this.$refs.communityList[this.active].finished = false;
					this.$refs.communityList[this.active].refreshList();
				}
			},
			// 跳转服务
			btnServer(index) {
				if (index < 4) {
					this.to('/pages/other/detail/main?id=' + this.serviceList[index].id + '&title=' + this.serviceList[
						index].title);
				} else {
					wx.showToast({
						title: '功能开发中，敬请期待！',
						icon: 'none',
						duration: 2000
					});
				}
			},
			//是否吸顶
			// #ifdef H5
			isFiex() {
				let windowScroll = document.body.scrollTop || document.documentElement.scrollTop;
				if (this.top < windowScroll) {
					this.topFiex = true;
				} else {
					this.topFiex = false;
				}
			},
			// #endif
			join(id) {
				let {
					id: userId
				} = uni.getStorageSync('userInfo');
				if (this.List.status == 1) {
					userQuitGroup({
						groupId: id,
						userId
					}).then(res => {
						this.List.status = 1 - this.List.status;
					});
				} else {
					// #ifdef MP-WEIXIN
					uni.requestSubscribeMessage({
						tmplIds: ['XiST2JTtF1dTmwy14tq8-QqJPlUQ6kzKYMUzG6BBmD0']
					});
					// #endif
					userJoinGroup({
						groupId: id,
						userId
					}).then(res => {
						this.List.status = 1 - this.List.status;
					});
				}
			}
		},
		onPullDownRefresh() {
			this.List = {};
			this.getdetals();
		},
		onShow() {
			var that = this;
			this.getdetals();
			// #ifdef H5
			this.$nextTick(function() {
				const query = uni.createSelectorQuery().in(that);
				query
					.select('.tabs')
					.boundingClientRect(data => {
						that.top = data.top;
					})
					.exec();
			});
			document.addEventListener('scroll', this.isFiex);
			// #endif
		},
		onLoad(options) {
			this.status = options.status;
			this.id = options.id;
		},
		onHide() {
			// #ifdef H5
			document.removeEventListener('scroll', this.isFiex, false);
			// #endif
		},
		onShareAppMessage() {
			const id = this.id;
			const title = '同病互助-' + this.List.groupName;
			return {
				title: title,
				imageUrl: this.$shareImageUrl,
				path: 'pages/CommunityPages/circleDetails/main?id=' + id
			};
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		background-color: #f1efef;

		.head {
			padding: 30rpx;
			height: 260rpx;
			background: linear-gradient(#32C59A 0%, #32C59A 100%);

			.send {
				height: 30rpx;
				text-align: right;
				font-size: 30rpx;
				color: #ffffff;
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						margin-right: 30rpx;
					}

					div {
						p:nth-child(1) {
							font-size: 34rpx;
							margin-bottom: 15rpx;
						}

						p:nth-child(2) {
							font-size: 24rpx;
						}

						p {
							color: #ffffff;
						}
					}
				}

				.right {
					width: 112rpx;
					height: 50rpx;
					line-height: 50rpx;
					background: #ffffff;
					border-radius: 25rpx;
					text-align: center;
					font-size: 24rpx;
					color: #32C59A;
				}

				.right.gray {
					color: #999999;
				}
			}
		}

		.tabs {
			border-bottom: 1rpx solid #f1f1f1;
		}

		.Box {
			height: calc(100vh - 400rpx);
			background-color: #ffffff;

			swiper {
				height: 100%;
			}
		}

		.isFiex {
			position: fixed;
			top: 80rpx;
			z-index: 10;
		}

		.service-box {
			padding: 30rpx 30rpx 27rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: #f1efef;

			.service {
				margin-bottom: 3rpx;
				width: calc(684rpx / 3);
				height: 180rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 180rpx;
				font-size: 26rpx;
				background-color: #fff;
			}
		}

		.mark {
			z-index: 1;
			opacity: 1;
			position: fixed;
			width: 100%;
			height: 100%;

			.selectBox {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 240rpx;
				height: 140rpx;
				position: absolute;
				right: 10rpx;
				top: 81rpx;
				border-radius: 15rpx;
				background-color: #ffffff;

				p {
					width: 100%;
					height: 50%;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				p:nth-child(1) {
					border-bottom: 1rpx solid #e8e8e8;
				}
			}
		}
	}
</style>